<template>
    <dv-border-box-8 class="order-panel">
      <div class="panel-header">
        <i class="el-icon-document"></i>
        订单执行追踪
      </div>
      
      <div class="order-content">
        <el-table 
          :data="orderData" 
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :cell-class-name="tableCellClassName"
        >
          <el-table-column prop="orderId" label="订单编号" />
          <el-table-column prop="customer" label="客户" />
          <el-table-column prop="status" label="状态" :formatter="formatStatus" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="deliveryDate" label="交付日期" />
        </el-table>
      </div>
    </dv-border-box-8>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const props = defineProps({
    orderData: {
      type: Array,
      required: true
    }
  })
  
  // 状态格式化函数
  const formatStatus = (row) => {
    switch (row.status) {
      case 'pending':
        return '待处理'
      case 'in_progress':
        return '进行中'
      case 'completed':
        return '已完成'
      case 'delayed':
        return '延迟'
      default:
        return '未知状态'
    }
  }
  
  // 表格行类名
  const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd'
  }
  
  // 表格单元格类名
  const tableCellClassName = ({row, column}) => {
    if (column.property === 'status') {
      if (row.status === 'completed') return 'status-success'
      if (row.status === 'delayed') return 'status-danger'
      if (row.status === 'in_progress') return 'status-primary'
      if (row.status === 'pending') return 'status-warning'
    }
    return ''
  }
  </script>
  
  <style>
  .order-panel .el-table .table-row-even {
    background-color: rgba(24, 44, 78, 0.6) !important;
  }
  
  .order-panel .el-table .table-row-odd {
    background-color: rgba(24, 44, 78, 0.3) !important;
  }
  
  .order-panel .el-table .status-success {
    color: #67c23a !important;
    font-weight: bold !important;
  }
  
  .order-panel .el-table .status-danger {
    color: #f56c6c !important;
    font-weight: bold !important;
  }
  
  .order-panel .el-table .status-primary {
    color: #409eff !important;
    font-weight: bold !important;
  }
  
  .order-panel .el-table .status-warning {
    color: #e6a23c !important;
    font-weight: bold !important;
  }
  
  .order-panel .el-table th {
    background-color: rgba(21, 45, 99, 0.8) !important;
    color: #29b6ff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .order-panel .el-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  .order-panel .el-table {
    background-color: transparent !important;
    color: #fff !important;
  }
  
  .order-panel .el-table__body tr:hover > td {
    background-color: rgba(41, 182, 255, 0.1) !important;
  }
  </style>
  
  <style scoped>
  .order-panel {
    width: 100%;
    height: 350px;
    position: relative;
    padding: 15px;
  }
  
  .panel-header {
    font-size: 16px;
    color: #29b6ff;
    margin-bottom: 15px;
  }
  
  .order-content {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
  }
  </style>